<template>
  <div v-if="visible" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-auto overflow-hidden">
      <!-- Modal Header -->
      <div class="bg-emerald-600 text-white px-6 py-4 flex justify-between items-center">
        <h3 class="text-lg font-medium">用户详细信息</h3>
        <button @click="$emit('close')" type="button" class="text-white hover:text-gray-200 focus:outline-none">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <!-- Modal Body -->
      <div class="px-6 py-5 max-h-[70vh] overflow-y-auto">
        <div v-if="!user" class="text-center py-10 text-gray-500">
          <i class="fas fa-spinner fa-spin mr-2"></i> 正在加载用户信息...
        </div>
        <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- Left Column: Avatar and Basic Info -->
          <div class="md:col-span-1 flex flex-col items-center md:items-start">
            <img 
              :src="user.avatar" 
              alt="用户头像" 
              class="w-32 h-32 rounded-full object-cover mb-4 border-2 border-emerald-200 shadow-md"
              crossorigin="anonymous"
            >
            <h4 class="text-xl font-semibold text-gray-800 mb-1">{{ user.name }}</h4>
            <p class="text-sm text-gray-500 mb-1">@{{ user.username }}</p>
            <p class="text-sm text-gray-500 mb-3">{{ user.email }}</p>
            
            <span :class="statusClass(user.status)" class="text-xs font-semibold px-3 py-1 rounded-full mb-2">
              {{ formatStatus(user.status) }}
            </span>
            <span :class="roleClass(user.role)" class="text-xs font-semibold px-3 py-1 rounded-full">
              {{ formatRole(user.role) }}
            </span>
          </div>

          <!-- Right Column: Detailed Info -->
          <div class="md:col-span-2 space-y-4">
            <div>
              <h5 class="text-sm font-medium text-gray-500 mb-1">基本与身体数据</h5>
              <div class="bg-gray-50 p-3 rounded-md grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
                <p><strong class="text-gray-600">性别:</strong> {{ user.gender }}</p>
                <p><strong class="text-gray-600">年龄:</strong> {{ user.age }} 岁</p>
                <p><strong class="text-gray-600">身高:</strong> {{ user.height }} cm</p>
                <p><strong class="text-gray-600">体重:</strong> {{ user.weight }} kg</p>
              </div>
            </div>

            <div>
              <h5 class="text-sm font-medium text-gray-500 mb-1">健康目标与习惯</h5>
              <div class="bg-gray-50 p-3 rounded-md grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
                <p><strong class="text-gray-600">饮食目标:</strong> <span :class="goalClass(user.goal)" class="px-1.5 py-0.5 rounded-full text-xs">{{ formatGoal(user.goal) }}</span></p>
                <p><strong class="text-gray-600">每日热量:</strong> {{ user.dailyCalories }} kcal</p>
                <p class="col-span-2"><strong class="text-gray-600">活动水平:</strong> {{ formatActivityLevel(user.activityLevel) }}</p>
              </div>
            </div>
            
            <div>
              <h5 class="text-sm font-medium text-gray-500 mb-1">账户信息</h5>
              <div class="bg-gray-50 p-3 rounded-md grid grid-cols-1 gap-y-2 text-sm">
                <p><strong class="text-gray-600">注册日期:</strong> {{ formatDateTime(user.registerDate) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal Footer -->
      <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
        <button 
          @click="$emit('close')" 
          type="button" 
          class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 text-sm"
        >
          关闭
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';
import {
  formatGoal,
  formatRole,
  formatStatus,
  formatActivityLevel,
  formatDateTime
} from '@/utils/formatters';

const props = defineProps({
  user: {
    type: Object,
    default: null
  },
  visible: {
    type: Boolean,
    required: true
  }
});

defineEmits(['close']);

// Formatting functions (can be moved to a utils file if used elsewhere)
// const formatGoal = (goal) => { // ... removed ... };
// const formatRole = (role) => { // ... removed ... };
// const formatStatus = (status) => { // ... removed ... };
// const formatActivityLevel = (level) => { // ... removed ... };
// const formatDateTime = (dateTimeString) => { // ... removed ... };

// Styling classes (similar to UsersView for consistency)
const goalClass = (goal) => {
  const classes = {
    'weight_loss': 'bg-purple-100 text-purple-800',
    'muscle_gain': 'bg-blue-100 text-blue-800',
    'health': 'bg-green-100 text-green-800'
  };
  return classes[goal] || 'bg-gray-100 text-gray-800';
};

const statusClass = (status) => {
  return status === 'active' 
    ? 'bg-green-100 text-green-800' 
    : 'bg-gray-100 text-gray-800';
};

const roleClass = (role) => {
  return role === 'admin'
    ? 'bg-sky-100 text-sky-800'
    : 'bg-slate-100 text-slate-800';
};

</script>

<style scoped>
/* Optional: Add any specific styles for this modal */
</style> 